<template lang="html">
  <div class="edit">
    <v-toolbar absolute>
      <v-btn icon @click="goback">
        <v-icon>fa-arrow-left</v-icon>
      </v-btn>

      <v-toolbar-title v-html="title"></v-toolbar-title>

      <v-spacer></v-spacer>

      <a v-html="addText" @click="goback"></a>
    </v-toolbar>

    <v-container class="v-edit" :style="{height: height}">
      <v-layout wrap>
        <v-flex xs12>
          <v-text-field
            label="设备编号"
            v-model="dataJson.FCode"
            append-icon="fa-qrcode"
            placeholder="请输入"
            @click="QRScan"
          ></v-text-field>
          <v-select
            v-model="dataJson.FRunStatus"
            :items="items"
            item-text="key"
            item-value="val"
            label="运行情况"
          ></v-select>
          <v-text-field
            label="设备地址"
            v-model="dataJson.FAdress"
            append-icon="fa-map-marker-alt"
            disabled
          ></v-text-field>
          <v-select
            v-model="area"
            :items="areaDataJson"
            :search-input.sync="areaSearch"
            item-text="FName"
            item-value="FId"
            label="所属片区"
          ></v-select>
          <v-select
            v-model="management"
            :items="managementDataJson"
            :search-input.sync="managementSearch"
            item-text="FName"
            item-value="FId"
            label="责任人"
          ></v-select>
          <!-- <v-combobox
            v-model="area"
            :items="areaDataJson"
            :search-input.sync="areaSearch"
            item-text="FName"
            item-value="FId"
            label="所属片区"
          ></v-combobox>
          <v-combobox
            v-model="management"
            :items="managementDataJson"
            :search-input.sync="managementSearch"
            item-text="FName"
            item-value="FId"
            label="责任人"
          ></v-combobox> -->
        </v-flex>
        <v-btn class="submit" color="primary" @click="submit">提交</v-btn>
      </v-layout>
    </v-container>

    <v-bottom-nav
      :active.sync="bottomNav"
      :value="true"
      absolute
      color="transparent">
      <router-link class="tab-link" v-for="tab, index in tabsButton" :to="{ path: tab.url, params: {} }" @click.native="changeTitle(tab.text)">
        <v-btn color="#006cc6" flat :value="index">
          <span>{{tab.text}}</span>
          <v-icon>{{tab.icon}}</v-icon>
        </v-btn>
      </router-link>
    </v-bottom-nav>
  </div>
</template>

<script>
import {invoke, entityList} from "@/api"
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      height: "0px",
      title: "表单",
      addText: "取消",
      tabsButton: [
        {text: "主页", icon: "fa-home", url: "/homepage"},
        {text: "个人中心", icon: "fa-user", url: "/profile"}
      ],
      bottomNav: 0,
      areaDataJson: [],
      managementDataJson: [],
      dataJson: {
        FId: "",
        FCode: "",
        FAdress: "",
        FArea: {},
        FResponsible: {},
        // FCodeType: "WDMIntelligentStreetLamp",
        x: "",
        y: "",
        FRunStatus: ""
      },
      items: [
        { key: '异常', val: '0' },
        { key: '正常', val: '1' },
      ],
      area: null,
      management: null,
      areaSearch: null,
      managementSearch: null
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted() {
    this.resize()
    this.setData()
  },
  methods: {
    resize() {
      let windowHeight = window.getComputedStyle(document.querySelector('body')).height
      this.height = Number(windowHeight.replace('px', '')) - 56 - 56 + 'px'
    },
    setData() {
      plus.nativeUI.showWaiting() // eslint-disable-line
      if (this.$route.query.QRId) {
        this.$set(this.dataJson, 'FCode', this.$route.query.FCode)
        // this.dataJson.FCode = this.$route.query.QRId
      }
      if (this.$route.query.FId) {
        service({
          url: `api/${this.$route.query.pageCode}.Edit.vdp?entityId=${this.$route.query.FId}`,
          method: 'post'
        }).then((res) => {
          this.dataJson = {}
          this.dataJson = res.data.data.editJson.data
          this.management = this.dataJson.FResponsible
          this.loadAreaData()
        })
      }
    },
    geolocation() {
      const vm = this
      plus.geolocation.getCurrentPosition(function(p) {
        // this.$set(this.dataJson, 'x', p.coords.latitude)
        // this.$set(this.dataJson, 'y', p.coords.longitude)
        // this.$set(this.dataJson, 'FAdress', p.addresses)
        vm.dataJson.x = p.coords.latitude
        vm.dataJson.y = p.coords.longitude
        vm.dataJson.FAdress = p.addresses
        plus.nativeUI.closeWaiting() // eslint-disable-line
    		// alert('Geolocation\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.altitude)
    	}, function(e){
    		alert('Geolocation error: ' + e.message)
        plus.nativeUI.closeWaiting() // eslint-disable-line
    	},{provider:'baidu'})
    },
    loadAreaData() {
      entityList.getListDataByPost("WDM.Area.List", {
        unitCode: "WDM.Area",
        listId: "8a8ff08c-d49f-4ec4-9ab2-997fdc53bece",
        unitId: "276892d9-dbb1-4ef6-87b9-f463184d3360",
        keyword: this.areaSearch,
        pageSize: 100
        // pageCode: vm.$route.query.pageCode + ".List"
      }).then((res) => {
        this.areaDataJson = []
        this.areaDataJson = res.data.records
        this.loadManagementData()
      })
    },
    loadManagementData() {
      entityList.getListDataByPost("WDM.PeopleManagement.SelectList", {
        unitCode: "WDM.PeopleManagement",
        listId: "59cfbaa7-9350-4e51-841e-e406371682ee",
        unitId: "08128467-2749-461b-b800-9d33995195a7",
        keyword: this.managementSearch,
        pageSize: 100
        // pageCode: this.$route.query.pageCode + ".List"
      }).then((res) => {
        this.managementDataJson = []
        this.managementDataJson = res.data.records
        this.geolocation()
      })
    },
    goback() {
      this.$router.go(-1)
    },
    changeTitle(title) {
      this.title = title
    },
    submit() {
      let args = {
        data: [this.dataJson]
      }
      invoke("WDM.ProblemReport.save", args).then((res) => {
        this.$router.replace({
          path: "homepage"
        })
        this.$toast.center('提交成功!')
      }).catch((err) => {
        this.$toast.center(err.msg)
      })
    },
    QRScan() {
      this.$router.push({
        path: "/scan"
      })
    }
  },
  watch: {
    area(val) {
      this.dataJson.FArea = this.area.FId
    },
    management(val) {
      this.dataJson.FResponsible = this.management.FId
    },
    areaSearch () {
      this.loadAreaData()
    },
    managementSearch () {
      this.loadManagementData()
    }
  }
}
</script>

<style lang="scss">
.edit {
  height: 100%;
  position: relative;


  .v-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    .tab-link {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 50%;
    }
  }

  .v-edit {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0 !important;
    }

    span {
      color: rgb(199, 199, 204) !important;
    }

    i {
      font-size: 14px;
      margin-left: 10px;
      color: rgb(199, 199, 204) !important;
    }
  }

  .submit {
    width: 250px;
    margin: 10px auto;
  }
}
</style>
